<template xmlns:overflow="http://www.w3.org/1999/xhtml" xmlns:display="http://www.w3.org/1999/xhtml"
          xmlns:position="http://www.w3.org/1999/xhtml">

  <div>
    <!--  style="border: solid 1px rgba(49,63,77,0.43)"-->

    <div style="background-color:#468aff">
      <ret-head></ret-head>
    </div>
    <div style="margin-top: 30px;background: white; box-shadow:1px 2px 3px 4px rgba(204,204,204,0.38)" class="main"  >
      <p style="font-family: 黑体;font-size: 25px; margin-right: 28px;">&nbsp;找回密码</p>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="right"  style="margin-top: 60px">
        <el-form-item label="账号" prop="id" style="width: 350px">
          <el-input v-model="ruleForm.id" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item style="margin-right:100px;margin-top: 30px">
          <el-button type="primary" @click="submitForm('ruleForm')" style="width: 250px">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div  style="margin-left: 18%;margin-top: 200px" >
      <el-steps :space="300" :active="0" finish-status="success" align-center>
        <el-step title="进行中 步骤 1" status="finish"></el-step>
        <el-step title="步骤 2" ></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
    import RetHead from "./RetHead";

    export default {
      name: "Step1",
      components: {
        RetHead:RetHead

      },

      data() {
        return {
          emailSplit:'',
          ruleForm: {
            id: null,
          },
          rules: {
            id: [
              {required: true, message: '请输入手机号', trigger: 'blur'},
              {min: 3, max: 11, message: '长度在 3 到 11个字符', trigger: 'blur'}
            ]
          }
        }
      },
      methods: {
        submitForm() {
          this.$refs['ruleForm'].validate(async (valid) => {
            if (valid) {
              const {data: res} = await this.$http.post(
                'http://localhost:8888/retrieveById',
                {id:this.ruleForm.id},
                /* {ruleFrom:this.ruleFrom},*/
                {emulateJSON:true});
              if (res.code === 200) {
                    this.emailSplit=res.data.email.substr(0,4),
                    window.sessionStorage.setItem('email', res.data.email);
                    window.sessionStorage.setItem('emailSplit', this.emailSplit);
                   this.$router.push({path: '/Step2', query: {id:res.data.id}});
              }else {
                this.$message({
                  message: '用户名不存在!',
                  type: 'error'
                });
              }
            }else {
              return false
            }
          });
        },
      }
    }
</script>

<style scoped>
  .main{
    text-align: center;
    background-color: rgba(255, 255, 255, 0.07);
    /*border-radius: 20px;*/
    width: 437px;
    height: 300px;
    position: relative;
    left: 50%;
    top: 10%;
    transform: translate(-50%,10%);
  }

</style>
